<template>
	<view class="flex-col page">
		
		
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="我的订单" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		
		<u-sticky :customNavHeight="statusBarHeight" bgColor="#F5F5F5">
		    <u-tabs bar-width='70' :list="tabs" :scrollable='false'
		    	:current="current" @change="onChange"></u-tabs>
		</u-sticky>
			
		
		
	   
	   <view class="order_card" v-if="listData.length > 0">
			<view class="card" v-for="(item,index) in listData" @click="goOrderDetail(item)">
				<view class="card_top">
					<view style="width: 85%;" class="font14">订单号：{{item.order_no}}</view>
					<view class="font14" style="color: #25A785;">{{setStatus(item.order_state,item.order_type,item.pay_status)}}</view>
				</view>
				<u-line color="#eaeaea" :hairline="false"></u-line>
				
				
				<view v-if="item.is_parent == 1">
					<view class="flex-col" v-for="(child,ci) in item.childOrder" :key="ci">
						<view class="card_medium">
							<view style="width: 30%;">
								<image :src="child.sku.sku_img_url" class="card_img"></image>
							</view>
							
							<view class="med_right">
								<view class="font16 fontbold med_right1">{{child.goods_name}}</view>
								<view class="font12 med_right2">{{child.sku.sku_name}}</view>
								<view class="font12 med_right2">数量：x{{child.order_number}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="card_medium">
						<view style="width: 30%;">
							<image :src="item.sku.sku_img_url" class="card_img"></image>
						</view>
						
						<view class="med_right">
							<view class="font16 fontbold med_right1">{{item.goods_name}}</view>
							<view class="font12 med_right2">{{item.sku.sku_name}}</view>
							<view class="font12 med_right2">数量：x{{item.order_number}}</view>
						</view>
					</view>
				</view>
				
				
				<view class="med_right3">
					
					<view class="font12">{{payStatus(item)}}</view>
					
					<view class="font12" style="margin-left: 20rpx;">优惠:{{item.order_coupon_price}}</view>
					<view class="font12" style="margin-left: 20rpx;">实付：</view>
					<view class="font12 col_red">￥</view>
					<view class="font16 col_red">{{(item.order_state == 0 || item.order_state == 4) ? itemAllPrice(item) : item.order_pay_price}}</view>
				</view>
				
				<view class="card_btm">
					<view class="btm1" @click.stop="goOrderDetail(item)">订单详情</view>
					<view v-if="isShowAfterBtn(item)" class="btm1" @click.stop="goAfter(item)">申请退款</view>
					<view v-if="item.order_state == 0" class="btm1" @click.stop="cancelOrder(item)">取消订单</view>
					<view v-if="item.order_state == 1" class="btm1" @click.stop="txfh()">提醒发货</view>
					<view v-if="item.order_state == 2" class="btm1" @click.stop="orderReceived(item)">确认收货</view>
					<view v-if="(item.order_state == 3 || item.order_state == 4 || item.order_state == 5)" class="btm1" @click.stop="deleteOrder(item)">删除订单</view>
					<view v-if="item.order_state == 0" class="btm2" @click.stop="orderToPay(item)">立即付款</view>
					<view v-if="((item.order_state == 1 || item.order_state == 2) && item.merchantOfflineCount > 0)" class="btm2" @click.stop="goUse(item)">去使用</view>
				</view>
			</view>
			<u-loadmore margin-top="20" margin-bottom="20" :status="status" icon-type="flower"
			:load-text="loadText" />
	   </view>
	   
	   
		<view v-else class="flex-col items-center" style="margin-top: 80rpx;">
			<image src="/static/data_empty.png"></image>
			<text style="color: #c0c4cc;">暂无数据</text>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabs:[
					{
						name:'全部'
					},
					{
						name:'待付款'
					},
					{
						name:'待发货'
					},
					{
						name:'待收货'
					},
					{
						name:'待评价'
					}
				],
				listData:[],
				page:1,
				status: 'loadmore',
				loadText: {
					loadmore: '下拉加载更多...',
					loading: '加载中...',
					nomore: '没有更多数据了...'
				},
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		onLoad(op) {
			if(op.id != null){
				this.current = op.id;
			}
			this.listData = [];
			this.page = 1;
			this.getOrderList();
		},
		onShow() {
			let that = this
			uni.$once('refresh',function(data){
				that.listData = [];
				that.page = 1;
				that.getOrderList();
				
			})
			uni.$once('refresh1',function(d){
				that.listData = [];
				that.page = 1;
				that.getOrderList();
			})
		},
		onPullDownRefresh() {
			this.listData = [];
			this.page = 1;
			this.getOrderList();
		},
		onReachBottom() {
			this.getOrderList();
		},
		methods:{
			isShowAfterBtn(item){
				if(item.order_state == 1){
					return true;
				}else if(item.order_state == 2){
					return true;
				}else if(item.order_state == 3){
					return true;
				}
			},
			goAfter(item){
				let o = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/after_sales/after_sales?order=' + o
				})
			},
			
			///线下订单 去使用
			goUse(item){
				uni.navigateTo({
					url:'/pages/order/select_mer?order_id=' + item.order_id
				})
			},
			itemAllPrice(item){
				return (Number(item.order_total_price) + Number(item.shipping_fee)).toFixed(2)
			},
			
			///跳转订单详情
			goOrderDetail(item){
				uni.navigateTo({
					url: '/pages/order/order_detail?order_id='+item.order_id
				})
			},
			///删除订单
			deleteOrder(item){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认删除订单吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.deleteOrderChild(item);
						}
					}
				})
			},
			deleteOrderChild(item){
				let that = this;
				that.$request({
					url:'?c=Order&a=orderDele',
					type:'post',
					data:{
						order_id:item.order_id
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					that.listData = [];
					that.page = 1;
					that.getOrderList();
				})
			},
			
			///取消订单
			cancelOrder(item){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认取消订单吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.cancelOrderChild(item);
						}
					}
				})
			},
			cancelOrderChild(item){
				let that = this;
				that.$request({
					url:'?c=Order&a=cancelDele',
					type:'post',
					data:{
						order_id:item.order_id
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					that.listData = [];
					that.page = 1;
					that.getOrderList();
				})
			},
			
			
			///确认收货
			orderReceived(item){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认收货了吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.orderReceivedChild(item);
						}
					}
				})
			},
			orderReceivedChild(item){
				let that = this;
				that.$request({
					url:'?c=Order&a=orderEdit',
					type:'post',
					data:{
						order_id:item.order_id,
						edit_type:1
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					that.listData = [];
					that.page = 1;
					that.getOrderList();
				})
			},
			
			
			payStatus(item){
				if(item.order_state == 0 || item.order_state == 4){
					return '在线支付'
				}else{
					if(item.payment_type == 1){
						return '云豆支付'
					}else if(item.payment_type == 2){
						return '微信支付'
					}else if(item.payment_type == 3){
						return '云豆组合'
					}else if(item.payment_type == 4){
						return '生日豆支付'
					}else if(item.payment_type == 5){
						return '帮扶豆支付'
					}else if(item.payment_type == 6){
						return '生日豆组合'
					}else if(item.payment_type == 7){
						return '帮扶豆组合'
					}
				}
			},
			
			setStatus(status,type,pay){
				//0待付款 1待发货 2待收货 3已完成 4已取消 5已退款
				if(pay == 3){
					return '退款中';
				}else if(pay == 4){
					return '已退款';
				}else{
					if(status == 0){
						return '待付款';
					}else if(status == 1){
						return '待发货';
					}else if(status == 2){
						if(type == 1){
							return '待收货';
						}else{
							return '待使用';
						}
					}else if(status == 3){
						return '已完成';
					}else if(status == 4){
						return '已取消';
					}else if(status == 5){
						return '已退款';
					}
				}
				
				
			},
			
			
			
			getOrderList(){
				let state = '';
				if(this.current == 0){
					state = ''
				}else if(this.current == 1){
					state = '0'
				}else if(this.current == 2){
					state = '1'
				}else if(this.current == 3){
					state = '2'
				}
				let data = {};
				if(this.current == 4){
					data.page = this.page
					data.limit = 10
					data.comment_status = 0
				}else{
					data.page = this.page
					data.limit = 10
					data.order_state = state
				}
				this.$request({
					url:'?c=Order&a=orderList',
					type:'get',
					data:data
				}).then(res =>{
					uni.stopPullDownRefresh();
					this.status = 'loadmore';
					if (res.data && res.data.length > 0) {
						this.listData = [...this.listData, ...res.data];
						this.page += 1;
						if (res.data.length < 10) {
							this.status = 'nomore';
						}
					} else {
						this.status = 'nomore';
					}
				})
			},
			
			
			
			///订单列表未付款 去支付
			orderToPay(item){
				let pack = {}
				pack.goType = 2;
				pack.free_shipping = item.free_shipping;
				pack.fixed_shipping_fee = item.fixed_shipping_fee;
				if(item.is_parent == 1){
					pack.sell_price = item.order_total_price;
					pack.order_number = 1;
				}else{
					pack.sell_price = item.order_price;
					pack.order_number = item.order_number;
				}
				
				
				pack.order_no = item.order_no;
				pack.order_id = item.order_id;
				pack.paymentMethod = item.paymentMethod;
				pack.coupon = item.coupon;
				pack.fee = item.shipping_fee;
				
				let p = JSON.stringify(pack)
				uni.navigateTo({
					url:'/pages/order_allocation/order_pay?pack='+p
				})	
			},
			
			txfh(){
				uni.showToast({
					title:'提醒发货成功'
				})
			},
			
			onChange(val){
				// console.log(val)
				this.current = val.index;
				this.listData = [];
				this.page = 1;
				this.getOrderList();
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	// overflow-y: auto;
	// overflow-x: hidden;
	height: 100%;
}
.col_red {
	color: red;
}
.font12{
	font-size: 25rpx;
}
.font14{
	font-size: 28rpx;
}
.font16{
	font-size: 30rpx;
}
.order_card {
	width: 100vw;
	display: flex;
	flex-direction: column;
	// flex-wrap: wrap;
	justify-content: center;
}
.card {
	// width: 96%;
	margin-top: 30rpx;
	border-radius: 10rpx;
	padding: 15rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	background-color: white;
	box-shadow: 1rpx 1px 5rpx #d5d5d5;
}
.card_top {
	display: flex;
	padding: 15rpx;
}
.card_medium {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
}
.med_right1 {
	// margin-bottom: 30rpx;
}
.med_right2 {
	color: #909090;
	margin-top: 15rpx;
	
}
.med_right3 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 15rpx;
}
.card_btm {
	display: flex;
	margin-top: 20rpx;
	justify-content: flex-end;
	align-items: center;
	height: 80rpx;
	width: 100%;
	gap: 10rpx;
	padding-right: 10rpx;
}
.btm1 {
	padding: 6rpx 20rpx;
	background-color: #ffffff;
	color: #5c8edc;
	border: #5c8edc 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}

.btm2 {
	padding: 6rpx 20rpx;
	background-color: #5c8edc;
	color: white;
	border: #5c8edc 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}
</style>
